<template>
    <div class="placeOrder" style="position:relative;">
        <div v-if="!paymentStatus" >
            <div class="lineItem" >
                <CrossLine></CrossLine>
                <div class="panle carlist">
                    <div class="c">
                        <ul>
                            <li>
                                <div class="lst">
                                    <div class="lstImg" v-if="carlist.pic==null || carlist.pic==''">
                                        <img src="static/img/noCarPic.png"> 
                                    </div>
                                    <div class="lstImg" v-else>
                                        <img :src="$store.state.appData.imgUrl+carlist.pic">
                                    </div>
                                    <div class="lstMsg">
                                        <p class="carName">{{carlist.carName}}</p>
                                        <p class="carColor">颜色:<span>{{carlist.color}}</span></p>
                                        <p class="carPrice">指导价:{{carlist.guidePrice}}万</p>
                                    </div>
                                </div>
                            </li> 
                        </ul>
                    </div>
                </div>
                <CrossLine></CrossLine>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li style="margin:0px 0px 0px 15px;">
                        <div class="mui-input-row" style="border-bottom:1px solid #e9e9e9;">
                            <label style="width:15%;">备注：</label>
                            <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="carlist.remark" maxlength="20" type="text" class="mui-input-clear" placeholder="选填：用户可留言">
                        </div>
                    </li>
                </ul>
                <div class="schedule">
                    <!-- 询价规则，法律条款 -->
                    <rules :rulesData="rulesData" v-on:switchRulesCheckStatus="switchRulesCheckStatus"></rules>
                    <!-- <ul class="mui-table-view mui-table-view-chevron clause">
                        <li class="mui-table-view-cell mui-media li-height">
                            <a class="mui-navigate-right">
                            现金券:暂无可用
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right  mui-checkbox  mui-input-row mui-left">
                            <input name="checkbox" value="bidding" type="checkbox">
                            <span>我已同意《询价规则》</span>
                        </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right  mui-checkbox  mui-input-row mui-left">
                            <input name="checkbox" value="clause" type="checkbox">
                            <span>我已同意《法律条款》</span>
                        </a>
                        </li>
                    </ul> -->
                </div>
            </div>
            <div class="neir-foot">
                <div class="inquiry-amount">签约资源锁定金:
                <span class="red">￥{{initPrice(downPrice)}}</span>
                </div>
                <div class="go-payment" :class="confirm ? 'abled' : 'disabled'" @tap="intoFutures" >下单付款</div>
            </div>
        </div>
        <payment v-else :paymentStatus.sync="paymentStatus" :biddingData="carlist"></payment> 
    </div>
    
</template>

<script>
    import payment from '@/components/order-form/biding/payment/payment'
    import CrossLine from '@/components/base/cross-line/cross-line'
    import rules from "@/components/base/rules-clause/rules-clause"
    import mui from "static/js/mui"
    import storage from '@/utils/localstorage'
    import utils from '@/utils/utils'
    import { Toast } from 'mint-ui'
    export default {
        components: {
            CrossLine,
            payment,
            rules
        },
        data() {
            return {
                customerId:storage.getLocalstorage('user').id,
                //是否显示支付组件
                paymentStatus:false,
                biddingStatus: false,
                /* clauseStatus: false, */
                confirm: false,
                carlist:{},
                downPrice:'',
                orderData:{
                    price: 1 
                },
                //传入规则变量参数
                rulesData:{
                    name:'询价',
                    clause: '',
                    rule: ''
                }
            }
        },
        props: {},
        watch: {},
        methods: {
            switchRulesCheckStatus(status){
                this.biddingStatus = status
                if (this.biddingStatus == true) {
                    this.confirm = true;
                    //console.log(this.confirm)
                } else {
                    this.confirm = false;
                }
            },
            init() {
                this.downPrice = storage.getLocalstorage('globalConfig')[6]
                this.rulesData.clause = storage.getLocalstorage('globalConfig')[2]
                this.rulesData.rule = storage.getLocalstorage('globalConfig')[4]
            },
            initPrice(formartPrice) {
                let price = utils.formatMoney(formartPrice,2)
                return price
            },
            intoFutures(){
                if (this.confirm == true) {
                    // this.$store.dispatch('updateNavbarStatus', { isShowHead:true, isShowFoot:false})
                    this.paymentStatus = true
                }else{
                    let msg = ''
                    /* if(!this.clauseStatus){
                        msg = msg +'请勾选法律条款,'
                    } */
                    if(!this.biddingStatus){
                        msg = msg +'请勾选询价规则,'
                    }
                    msg = msg.substring(0,msg.length-1)
                    if(msg){
                        Toast(msg)
                    }
                }
            },
            //获取汽车对应的参数
            getParams() {
                //获取路由参数'
                var that=this
                // //console.log(that.carlist)
                let routeVal = this.$route.params
                // //console.log(routeVal);
                if (JSON.stringify(routeVal) !== "{}") {
                    if (routeVal.carParams) {
                        //console.log(routeVal.carParams)
                        that.carlist=routeVal.carParams
                        //console.log(that.carlist)
                    }
                }
            },
        },
        filters: {},
        computed: {},
        created() {
            this.getParams()
            this.init()
         },
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            let that = this;
            //判断input框是否都有选中 选中则可点亮确认按钮
            /* mui(".clause").on("change", "input", function () {
                let status = this.checked ? true : false;
                if (this.value == "bidding") {
                    that.biddingStatus = status;
                    //console.log(that.biddingStatus)
                }
               
                if (that.biddingStatus == true) {
                    that.confirm = true;
                    //console.log(that.confirm)
                } else {
                    that.confirm = false;
                }
            }); */
        },
        destroyed() { }
    }

</script>

<style lang="scss" scoped>
    /*图标默认设置样式*/
    .i-c {
        font-size: 1.1rem;
        position: relative;
        top: 5px;
        right: 5px;
    }
    .placeOrder{
        height:100%;
    }
    /*车型选择*/
    .carlist {
        width: 100%;
        .lst {
            width: 100%;
            background: #fff;
            overflow: hidden;
            padding: 10px 12px 0px 12px;
            .lstImg {
                width: 38%;
                float: left;
                height: 90px;
                background-color: #fff;
                text-align: left;
                img {
                    height: 100%;
                    vertical-align: middle;
                }
            }
            .lstMsg {
                width: 62%;
                float: left;
                height: 100%;
                padding: 6px 0px 5px 15px;
                p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-wrap: break-word;
                    word-break: normal;
                    margin-bottom: 10px;
                }
            }
        }
        .lstbottom {
            width: 100%;
            background: #fff;
            overflow: hidden;
            padding: 0px 12px 0px 12px;
            p {
                margin-bottom: 0px;
                line-height: 35px;
            }
        }
    }
    /*名字字段*/

    .carName {
        font-size: 0.7rem;
        color: #333;
        line-height: 15px;
        height: 28px;
    }
    /*颜色字段*/

    .carColor {
        font-size: 0.6rem;
        line-height: 15px;
    }
    /*价格字段*/
    .carPrice {
        font-size: 0.6rem;
        line-height: 15px;
        //color:#ff6a27;
    }

    .schedule {
        background: #fff;
    }
    /**确认按钮*/

    .affirm {
        width: 100%;
        padding: 20px;
        position: absolute;
        bottom: 0px;
        .afm {
            height: 40px;
            border: 1px solid #ddd;
            background-color: #b2b2b2;
            margin: 0 auto;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            line-height: 40px;
            font-size:15px;
        }
    }
    /**我已同意的样式*/

    .mui-table-view-cell {
        font-size: 0.7rem;
    }

    .mui-table-view-cell:before {
        height: 1px !important;
    }

    .mui-navigate-right:after {
        transform: rotate(90deg);
        font-size: 0.9rem;
    }

    .mui-checkbox input[type="checkbox"] {
        position: absolute;
        top: 5px;
        right: 20px;
        display: inline-block;
        width: 28px;
        height: 26px;
        border: 0;
        outline: 0 !important;
        background-color: transparent;
        -webkit-appearance: none;
    }

    .mui-checkbox input[type="checkbox"] {
        position: absolute;
        top: 4px;
        right: 20px;
        display: inline-block;
        width: 28px;
        height: 26px;
        border: 0;
        outline: 0 !important;
        background-color: transparent;
        -webkit-appearance: none;
        margin-top: 7px;
    }

    .mui-checkbox input[type="checkbox"]:before {
        font-family: Muiicons;
        font-size: 28px;
        font-weight: normal;
        line-height: 1;
        text-decoration: none;
        color: #aaa;
        border-radius: 0;
        background: none;
        -webkit-font-smoothing: antialiased;
    }

    .mui-checkbox input[type="checkbox"]:checked:before {
        content: "\e442";
    }

    .mui-checkbox input[type="checkbox"]:checked:before {
        color: #ff6a27;
    }

    .mui-checkbox input[type="checkbox"]:before {
        font-family: Muiicons;
        font-size: 28px;
        font-weight: normal;
        line-height: 1;
        text-decoration: none;
        color: #aaa;
        border-radius: 0;
        background: none;
        -webkit-font-smoothing: antialiased;
    }

    .mui-checkbox span {
        height: 26px;
        line-height: 25px;
        position: relative;
        top: 2px;
        left: 34px;
    }

    .mui-radio.mui-left input[type="radio"],
    .mui-checkbox.mui-left input[type="checkbox"] {
        left: 14px;
    }

    .mui-navigate-right:after,
    .mui-push-left:after,
    .mui-push-right:after {
        top: 35% !important;
    }

    /* 底部询价 */
    .neir-foot {
        box-shadow: 0 0 1px #d2d2d2;
        position:absolute;
        bottom:40px;width:100%;
    }
    .inquiry-amount {
    background:#fff;
    height: 50px;
    width: 70%;
    line-height: 50px;
    padding-left: 23px;
    font-size: 16px;
    display: inline-block;
    float: left;
    }
    .red {
    color: #ff6a27;
    }
    .go-payment {
    height: 50px;
    width: 30%;
    line-height: 50px;
    font-size: 16px;
    display: inline-block;
    float: left;
    text-align: center;
    }
    .abled {
    background-color: #ff6a27;
    color: #fff;
    }
    .disabled {
    background-color: #b2b2b2;
    color: #fff;
    }
    .mui-input-row label {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        line-height: 1.1;
        float: left;
        width: 15%;
        padding: 12px 0px 10px 3px;
        font-size: 0.7rem;
    }
    .mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea {
        float: left;
        width: 65%;
        margin-bottom: 0;
        padding-left: 0;
        border: 0;
    }
</style>